<script setup>
import { ref } from "vue";
import { showToast } from "vant";
import router from "../../router"; // 引入路由配置

const tel = ref("13000000000");
const name = ref("张三");
const onEdit = () => {
  router.push("/person/33");
};

const onSubmit = () => {
  router.push("/success");
};
</script>

<template>
  <div>
    <van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />
    <van-card
      num="2"
      tag="标签"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      origin-price="10.00"
    />
    <van-coupon-cell
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      @click="showList = true"
    />
    <van-divider>更多推荐商品</van-divider>
    <div>
      <van-image
        width="46%"
        height="300"
        class="image-left"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
      <van-image
        width="46%"
        height="300"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
    </div>
    <div>
      <van-image
        width="46%"
        height="300"
        class="image-left"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
      <van-image
        width="46%"
        height="300"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
    </div>
    <div>
      <van-image
        width="46%"
        height="300"
        class="image-left"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
      <van-image
        width="46%"
        height="300"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
    </div>
    <div>
      <van-image
        width="46%"
        height="300"
        class="image-left"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
      <van-image
        width="46%"
        height="300"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
    </div>
    <van-submit-bar :price="3050" button-text="确认订单" @submit="onSubmit" />
  </div>
</template>

<style scoped>
.image-left {
  margin-left: 10px;
  margin-right: 10px;
}
</style>
